<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <header>
      <!-- 筛选列表 -->
      <div class="filterBox">
        <p
          v-for="(item, index) in filtrateData"
          :key="index"
          :class="activeIndex === index ? 'activeName' : ''"
          @click="cutCon(index, item.orderStatus)"
        >
          {{ item.title }}
        </p>
      </div>
      <!-- 搜索 -->
      <div class="searchBox">
        <div class="searchBox_left">
          <p>
            <span>下单时间</span>
            <el-date-picker
              v-model="timeInput"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </p>
          <p>
            <span>订单状态</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="
                  item.state === '1'
                    ? '待接单'
                    : item.state === '2'
                    ? '配送中'
                    : item.state === '3'
                    ? '待评价'
                    : item.state === '4'
                    ? '已退款'
                    : '全部'
                "
                :value="item.state"
              >
              </el-option>
            </el-select>
          </p>
          <p>
            <span>下单人姓名</span>
            <el-input
              class="input"
              v-model="nameInput"
              placeholder="请输入姓名"
            ></el-input>
          </p>
          <p>
            <span>下单人手机号</span>
            <el-input
              class="input"
              v-model="phoInput"
              placeholder="请输入手机号"
            ></el-input>
          </p>
        </div>
        <div class="searchBox_right">
          <el-button type="primary" round @click="searchBtn">查询</el-button>
          <el-button round @click="reset">重置</el-button>
        </div>
      </div>
    </header>
    <!-- 表格 -->
    <div class="tabelBox">
      <tableCom
        :list="
          order.filterData.length === 0
            ? order.orderData.slice((num - 1) * pageNum, num * pageNum)
            : order.filterData.slice((num - 1) * pageNum, num * pageNum)
        "
        :table-config="tableConfig"
        @Particulars="Particulars"
        @onSortChange="onSortChange"
      ></tableCom>
    </div>
    <!-- 分页 -->
    <div class="pageing">
      <paging
        :pageData="
          order.filterData.length === 0 ? order.orderData : order.filterData
        "
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      ></paging>
    </div>

    <!-- 弹框 -->
    <datail v-if="drawer">
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        direction="btt"
        :modal="false"
        size="100%"
        :withHeader="false"
      >
        <div class="orderDetail_back">
          <span
            class="el-icon-arrow-left icon"
            @click="
              (e) => {
                e.stopPropagation();
                drawer = false;
              }
            "
          >
            <span>返回</span>
          </span>
        </div>
        <div class="msgBox">
          <p class="orderState">
            订单状态：{{
              detailMsg.orderStatus === "1"
                ? "待接单"
                : detailMsg.orderStatus === "2"
                ? "配送中"
                : detailMsg.orderStatus === "3"
                ? "待评价"
                : detailMsg.orderStatus === "4"
                ? "已退款"
                : "缺货"
            }}
          </p>
          <div>
            <p class="orderMsg">订单信息</p>
            <div class="orderMsgBox">
              <p>订单号：{{ detailMsg.orderNum }}</p>
              <p>联系人：{{ detailMsg.name }}</p>
              <p>手机号：{{ detailMsg.phoneNum }}</p>
              <p>订单价格：{{ detailMsg.ordermoney }}</p>
              <p>支付价格：{{ detailMsg.paymoney }}</p>
              <p>
                下单时间：{{
                  `${detailMsg.year}/${detailMsg.month}/${detailMsg.day} ${detailMsg.hour}.${detailMsg.second}`
                }}
              </p>
              <p>备注：{{ detailMsg.remark }}</p>
            </div>
            <p class="peisongMsg">配送信息</p>
            <div class="psBox">
              <p>骑士：{{ detailMsg.knightName }}</p>
              <p>手机号：{{ detailMsg.knightphoneNum }}</p>
              <p>配送时间：{{ detailMsg.deliveryTime }}</p>
              <p>到达时间：-</p>
            </div>
          </div>
        </div>
      </el-drawer>
    </datail>
  </div>
</template>

<script>
// import a from './a'; // 引入组件

// 分页组件
import paging from "../../components/paging";
// 表格组件
import tableCom from "../../components/table";
// 弹框
import datail from "../../components/details";

// 辅助函数
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
      num: 1, //定义一个截取数据时的变量
      pageNum: 5, //定义一页显示数量

      // 筛选数据
      filtrateData: [
        {
          title: "全部",
          orderStatus: "0",
        },
        {
          title: "待接单",
          orderStatus: "1",
        },
        {
          title: "配送中",
          orderStatus: "2",
        },
        {
          title: "待评价",
          orderStatus: "3",
        },
        {
          title: "已退款",
          orderStatus: "4",
        },
      ],

      // 筛选列表高亮
      activeName: "second",
      activeIndex: 0,

      // 下拉框数据和input数据
      options: [
        {
          value: "选项1",
          state: "0",
        },
        {
          value: "选项2",
          state: "1",
        },
        {
          value: "选项3",
          state: "2",
        },
        {
          value: "选项4",
          state: "3",
        },
        {
          value: "选项5",
          state: "4",
        },
      ],
      value: "",
      timeInput: "", //时间val
      nameInput: "", //姓名val
      phoInput: "", //手机号val

      // 弹框样式
      drawer: false,
      // 弹框信息
      detailMsg: "",

      // 表格头部数据
      tableConfig: {
        style: "width:100%;",
        config: [
          {
            label: "订单号",
            prop: "orderNum",
          },
          {
            label: "联系人",
            prop: "name",
          },
          {
            label: "手机号",
            prop: "phoneNum",
            width: "110",
          },
          {
            label: "订单金额",
            prop: "ordermoney",
            sortable: "custom",
          },
          {
            label: "支付金额",
            prop: "paymoney",
            sortable: "custom",
          },
          {
            label: "下单时间",
            prop: "downTime",
            width: "110",
            sortable: "custom",
          },
          {
            label: "骑士姓名",
            prop: "knightName",
          },
          {
            label: "骑士手机号",
            prop: "knightphoneNum",
            width: "110",
          },
          {
            label: "订单状态",
            prop: "orderStatus",
            formatter: (row, column, cellValue) => {
              if (cellValue === "1") {
                return "待接单";
              } else if (cellValue === "2") {
                return "配送中";
              } else if (cellValue === "3") {
                return "待评价";
              } else if (cellValue === "4") {
                return "已退款";
              } else {
                return "缺货";
              }
            },
          },
          {
            label: "备注",
            prop: "remark",
          },
          {
            label: "操作",
            shown: true,
            isEdit: false,
            isDel: false,
            isParticulars: true,
            isUndercarriage: false,
          },
        ],
      },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // 调用获取数据方法
    if (this.order.orderData.length === 0) {
      this.getOrderData();
    }
  },
  // 计算属性
  computed: {
    ...mapState({
      order: "order",
    }),
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 挂载组件
  components: {
    paging, //分页
    tableCom, //表格
    datail, //详情弹框
  },
  // Vue方法定义
  methods: {
    // action辅助函数
    ...mapActions({
      getOrderData: "order/getOrderData",
    }),
    // mutation辅助函数
    ...mapMutations({
      filterOrderData: "order/filterOrderData", //筛选数据
      searchOrderData: "order/searchOrderData", //搜索数据
      resetData: "order/resetData", //充值数据
      ascendingOrder: "order/ascendingOrder", //升序
      descendingOrder: "order/descendingOrder", //降序
    }),

    // 表格方法
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },

    // 分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.num = val;
    },

    // 头部筛选数据方法
    cutCon(index, orderStatus) {
      this.activeIndex = index;
      this.filterOrderData(orderStatus);
    },

    // 点击查询，开始收集数据，传到vuex中，进行搜索
    searchBtn() {
      /* 
        timeInput: "",//时间val
        value:"",//下拉框val
        nameInput:"",//姓名val
        phoInput:"",//手机号val
      */
      let obj = {
        time: this.timeInput,
        selVal: this.value,
        name: this.nameInput,
        phone: this.phoInput,
      };
      this.searchOrderData(obj);

      setTimeout(() => {
        this.timeInput = "";
        this.value = "";
        this.nameInput = "";
        this.phoInput = "";
      }, 100);
    },
    // 重置
    reset() {
      this.resetData();
      this.activeIndex = 0;
    },
    // 详情
    Particulars(res) {
      console.log(res);
      this.drawer = !this.drawer;
      this.detailMsg = res;
    },

    // 排序金额
    onSortChange(res) {
      console.log(res);
      if (res.column.id === "el-table_1_column_4") {
        if (res.order === "ascending") {
          console.log("订单金额升序");
          this.ascendingOrder("ordermoney");
        } else if (res.order === "descending") {
          console.log("订单金额降序");
          this.descendingOrder("ordermoney");
        }
      } else if (res.column.id === "el-table_1_column_5") {
        if (res.order === "ascending") {
          console.log("支付金额升序");
          this.ascendingOrder("paymoney");
        } else if (res.order === "descending") {
          console.log("支付金额降序");
          this.descendingOrder("paymoney");
        }
      } else if (res.column.id === "el-table_1_column_6") {
        if (res.order === "ascending") {
          console.log("下单时间升序");
          this.ascendingOrder("downTime");
        } else if (res.order === "descending") {
          console.log("下单时间降序");
          this.descendingOrder("downTime");
        }
      }
    },
  },
};
</script>

<style>
/* @import url(''); 引入css类 */
.box {
  height: 100%;
  padding: 20px;
  width: 90%;
}

/* header */
/* filterBox */
header .filterBox {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}
header .filterBox p {
  padding: 10px 5px;
  margin: 0 20px;
  font-size: 14px;
  color: #888;
}
header .filterBox p.activeName {
  border-bottom: 3px solid #40a1ff;
  color: #40a1ff;
}
/* searchBox */
header .searchBox {
  display: flex;
  justify-content: space-between;
  height: 60px;
}
header .searchBox .searchBox_left {
  display: flex;
  height: 100%;
}
header .searchBox .searchBox_left p {
  display: flex;
  height: 100%;
  align-items: center;
  margin-right: 30px;
}
header .searchBox .searchBox_left p span {
  font-size: 13px;
  padding: 0 10px;
}
header .searchBox .searchBox_left p .el-input {
  width: 130px;
  font-size: 13px;
}
header .searchBox .searchBox_left p > .input .el-input__inner {
  padding: 0 5px;
  height: 30px;
}
header .searchBox .searchBox_left p .el-input .el-input__suffix {
  padding: 0;
}
header .searchBox .searchBox_left p .el-input .el-input__icon {
  float: right;
  line-height: 30px;
}
header .searchBox .searchBox_left p .el-select .el-input .el-input__inner {
  padding: 0 5px;
  height: 30px;
}
header .searchBox .searchBox_right {
  height: 100%;
  display: flex;
  align-items: center;
}
header .searchBox .searchBox_right .el-button {
  height: 35px;
  width: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
.el-date-editor .el-input__inner {
  padding: 0 30px;
  height: 30px;
}
.el-date-editor .el-input__prefix {
  left: -2px;
  top: 1px;
}

/* 分页样式 */
.pageing {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}

.el-drawer {
  background: #eef1f5;
  padding: 40px;
}
/* 头部返回样式 */
.orderDetail_back {
  font-size: 13px;
  margin-bottom: 10px;
  width: auto;
}
.orderDetail_back .icon {
  font-size: 20px;
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
}
.orderDetail_back .icon span {
  font-size: 13px;
}
/* 订单信息样式 */
.msgBox {
  color: #333333;
  font-size: 13px;
}
.msgBox .orderState {
  line-height: 40px;
}
.msgBox > div .orderMsg,
.msgBox > div .peisongMsg {
  padding: 15px 0px;
  font-size: 14px;
}
.msgBox > div .orderMsgBox p,
.msgBox > div .psBox p {
  line-height: 30px;
}
</style>
